<template>
  <div class="w-full h-auto" :class="{
    'cursor-pointer': edit ?? true,
    'preview-block-active': (edit ?? true) && isActive
  }" :style="{ background: props.timeline.bgColor }" @click="handlePreviewClick">

    <section class="relative max-w-[1200px] mx-auto py-[16px] px-[32px]">
      <div class="w-full relative">
        <template v-if="props.timeline.items && props.timeline.items.length">
          <div class="flex items-start justify-between relative mt-[160px]">
            <div v-for="(item, i) in props.timeline.items" :key="item.id"
              class="flex-1 flex flex-col items-center relative">
              <!-- 添加连接线（除了最后一个节点） -->
              <div v-if="i < props.timeline.items.length - 1"
                class="absolute top-[26px] left-[calc(50%+26px)] right-[calc(-50%+26px)] h-[2px] timeline-dashed-line">
                <!-- 右箭头 -->
                <div
                  class="absolute right-0 w-0 h-0 border-t-[4px] border-t-transparent border-b-[4px] border-b-transparent border-l-[8px] border-l-[#0067d1] top-[-3px]">
                </div>
              </div>
              <el-tooltip :visible="activeIndex === i && !!item.desc" :disabled="!item.desc" :manual="true"
                placement="top" effect="light" :popper-class="'timeline-tooltip'" :teleported="false"
                :append-to="`.radius-info`" :key="props.timeline.items.length">
                <template #content>
                  <div class=""> {{ item.desc }}</div>
                </template>
                <div
                  class="radius-info w-[32px] h-[32px] rounded-[64px] bg-[#d6e7f8] text-primary flex items-center justify-center cursor-pointer mx-[13px] my-[10px] relative z-10"
                  @mouseenter="setActive(i)" @click="setActive(i)">
                  <div
                    class="w-[24px] h-[24px] rounded-[64px] bg-[#b4d3f2] text-primary flex items-center justify-center cursor-pointer"
                    :style="activeIndex === i && { backgroundColor: '#0067d1', color: '#fff' }">
                    {{ i + 1 }}
                  </div>
                </div>
              </el-tooltip>
              <div class="mt-[6px] text-[#333] text-[16px] font-[500] leading-[22px]">{{ item.title }}</div>
              <div class="text-[#8C8C8C] text-[14px] leading-[22px]">{{ item.date }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="w-full h-[120px] flex items-center justify-center text-[#8C8C8C] text-[12px]">
            请设置内容
          </div>
        </template>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { TimelineState } from './timeline-module.vue'

const emit = defineEmits<{
  (e: 'click'): void;
}>()

const props = defineProps<{
  timeline: TimelineState;
  edit?: boolean;
  isActive?: boolean;
}>()
const activeIndex = ref(0)
function setActive(i: number) { activeIndex.value = i }

// 预览区块点击事件处理
const handlePreviewClick = (event: Event) => {
  // 只在编辑模式下处理点击事件
  if (props.edit ?? true) {
    event.stopPropagation()
    emit('click')
  }
}

watchEffect(() => {
  // 默认显示第一个节点说明
  if (props.timeline.items?.length) {
    activeIndex.value = 0
  }
})
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .2s
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0
}

:deep(.timeline-tooltip),
:deep(.timeline-tooltip .el-tooltip__content) {
  padding: 6px 12px !important;
  background: #0067d1 !important;
  color: #fff !important;
  border-radius: 8px;
}

:deep(.timeline-tooltip .el-popper__arrow::before) {
  background: #0067d1 !important;
  border-color: #0067d1 !important;
}

/* 时间轴虚线样式 */
.timeline-dashed-line {
  background-image: linear-gradient(to right, #0067d1 0%, #0067d1 50%, transparent 50%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
}

/* 预览区块激活状态样式 */
.preview-block-active {
  border: 1px dashed #000000;
  transition: border 0.3s ease;
}
</style>
